<template>
  <view class="cart u-p-l-35 u-p-b-85">
    <u-checkbox-group>
      <u-checkbox
        active-color="#ff2d4a"
        shape="circle"
        v-model="item.checked"
        v-for="(item, index) in cateList"
        :key="item.goods_id"
        :label-disabled="true"
        @change="chgChecked(index)"
      >
        <YgCell
          :url="`/pages/goods_detail/goods_detail?goods_id=${item.goods_id}`"
          :cateIndex="index"
          :goodsObj="item"
          price="true"
          counterShow="true"
        ></YgCell>
      </u-checkbox>
    </u-checkbox-group>
    <!-- 结算 -->
    <view class="settlement u-p-25">
      <u-checkbox active-color="#ff2d4a" shape="circle" v-model="allChecked">
        <text class="u-font-21 u-m-l-14">全选</text>
      </u-checkbox>
      <view class="u-font-26 u-m-l-26">
        合计:
        <text class="u-font-28 price"> {{totalPrice}} </text>
      </view>
      <button class="u-font-21"  @tap="onGoPay">去结算({{totalCount}})</button>
    </view>
  </view>
</template>

<script>
export default {
  computed: {
    // 获取购物车数组数据
    cateList() {
      console.log(this.$store.state.cateList);
      return this.$store.state.cateList;
    },
    // 全选框状态
    allChecked: {
      get() {
        // every数组为0的时候还是返回true 所以要判断一下 0布尔值为false
        return (
          this.cateList.length && this.cateList.every((item) => item.checked)
        );
      },
      set(newVal) {
        const newCartList = this.cateList;
        newCartList.forEach((item) => (item.checked = newVal));
        this.$store.commit("changeList", newCartList);
      },
    },
    // 选中了的总价格
    totalPrice(){
        return this.$store.getters.totalPrice;
    },
    // 选中了的数量
    totalCount(){
        return this.$store.getters.totalCount;
    }
  },
  methods: {
    // 单选框事件
    chgChecked(index) {
      const newCartList = this.cateList;
      newCartList[index].checked = !newCartList[index].checked;
      this.$store.commit("changeList", newCartList);
    },
    // 跳转到支付页面
    onGoPay() {
      // 1 判断一下现在有没有选中商品
      if (this.totalCount > 0) {
        // 可以跳
        uni.navigateTo({ url: "/pages/pay/pay" });
      } else {
        // 提示用户要选购商品
        uni.showToast({
          title: "您还没有选择要购买的商品",
          icon: "none",
        });
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.settlement {
  background-color: #fff;
  border-top: 1px solid #eeeeee;
  width: 100%;
  position: fixed;
  bottom: 0;
  left: 0;
  display: flex;
  align-items: center;
  .price {
    color: #ea4350;
    font-weight: 550;
    margin-left: 20rpx;
    &::before {
      content: "￥";
      font-size: 20rpx;
    }
  }
  button {
    background-color: #ea4350;
    position: absolute;
    right: 25rpx;
    top: 50%;
    transform: translateY(-50%);
    color: #fff;
    font-size: 21rpx;
    border-radius: 26rpx;
  }
}
</style>